<template>
	<view class="header">
		<view class="container">
			<view class="container " id="asdfc">
				<!-- 博物馆名称区域 -->
				<view class="museum-header">
					<image src="/static/image/taipanFangZi.jpg" mode="widthFix" class="museum-logo"></image>
					<text class="museum-name">胎盘文化博物馆</text>
				</view>

				<!-- 参观日期选择区域 -->
				<view class="date-section">
					<view class="section-title">参观日期</view>
					<view class="date-options">
						<view :class="{ 'date-option-active': selectedDate === date.value }"
							@click="selectDate(date.value)" class="date-option" v-for="date in visibleDates"
							:key="date.value">
							<text class="date-text">{{ date.text }}</text>
							<text class="date-number">{{ date.number }}</text>
						</view>
					</view>
				</view>

				<!-- 参观时间选择区域，动态显示多个可预约时间 -->
				<view class="time-section">
					<view class="section-title">参观时间</view>
					<view class="time-options">
						<view v-for="time in filteredTimeRangeList" :key="time">
							<view class="time-option-active time-option" @click="selectTime(time)"
								v-if="selectedTime == time">
								<text class="time-text">{{ time }}</text>
							</view>
							<view @click="selectTime(time)" v-if="selectedTime != time" class="time-option">
								<text class="time-text">{{ time }}</text>
							</view>
						</view>

					</view>
				</view>

				<!-- 游客信息区域 -->
				<view class="visitor-info-section">
					<view class="visitor-info-header">
						<view class="visitor-info-title">
							<image src="/static/image/tkxx.jpg" mode="widthFix" class="visitor-icon"></image>
							<text class="visitor-info-text">游客信息</text>
						</view>
					</view>
					<view class="visitor-details">
						<view class="visitor-item">
							<text class="info-label">姓名</text>
							<input :value="visitorName" @input="handleNameInput" class="info-value"
								placeholder="请输入姓名" />
							<text v-if="!isNameValid" class="error-message">{{ nameErrorMessage }}</text>
						</view>
						<view class="visitor-item">
							<text class="info-label">证件类型</text>
							<picker :value="selectedCertificateIndex" @change="handleCertificateChange"
								:range="certificateTypes">
								<view class="info-value">身份证</view>
							</picker>
						</view>
						<view class="visitor-item">
							<text class="info-label">证件号</text>
							<input :value="visitorCertificateNumber" @input="handleCertificateNumberInput"
								class="info-value" placeholder="请输入身份证号" />
							<text v-if="!isCertificateNumberValid && visitorCertificateNumber.length > 0"
								class="error-message">
								{{ certificateErrorMessage }}
							</text>
						</view>
						<!-- 联系电话区域修改 -->
						<view class="visitor-item">
							<text class="info-label">联系电话</text>
							<input :value="maskedPhone" @input="handlePhoneNumberInput" class="info-value"
								placeholder="请输入联系电话" type="tel" />
							<text v-if="!isPhoneNumberValid && visitorPhoneNumber.length > 0" class="error-message">
								请输入有效的11位手机号码
							</text>
						</view>
					</view>
				</view>
				<!-- HTML 部分 -->
				<view class="user-auth-container">
					<view class="auth-checkbox-group">
						<!-- 使用 uni-app 原生 checkbox，设置固定尺寸 -->
						<checkbox class="auth-checkbox" :checked="isAuthAgreed" @click="handleAuthChange" />
						<label for="user-auth" class="auth-label">
							我已阅读并同意
							<text class="protocol-link" @click="showProtocol('service')">《用户服务协议》</text>
							和
							<text class="protocol-link" @click="showProtocol('privacy')">《隐私政策》</text>
						</label>
					</view>
					<!-- 错误提示 -->
					<text v-if="!isAuthAgreed && showAuthError" class="auth-error">请勾选授权协议</text>
				</view>

				<!-- 立即预约区域 -->
				<view class="book-section" :style="bookStyle">
					<view class="total-and-book">
						<view class="total">
							<text>总计</text>
							<text class="total-number">1</text>
							<text>张</text>
						</view>
						<view class="book-button" @click="handleBookNow">
							<text>立即预约</text>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 新增协议弹窗 -->
		<view v-if="showProtocolModal" class="protocol-modal">
			<view class="protocol-content">
				<view class="protocol-header">
					<text>用户服务协议和隐私政策</text>
					<text @click="closeProtocolModal" class="close-btn">×</text>
				</view>
				<view class="protocol-body" style="max-height: 600px; overflow-y: auto;">
					本平台仅收集预约必要的姓名、证件号、手机号，承诺不用于其他用途
					信息使用规则
					<view>用于参观预约身份核验</view>
					<view>发送预约确认及参观提醒</view>
					<view>仅在预约有效期内存储</view>
					我们严格保护用户信息安全，采取以下措施
					<view>输加密：采用HTTPS协议</view>
					<view>存储脱敏：证件号、手机号部分隐藏</view>
					<view>访问控制：仅限授权人员查阅</view>
				</view>
			</view>
		</view>


		<!-- 新增游客须知模态框 -->
		<view v-if="showNotice" class="notice-modal">
			<view class="notice-content">
				<view class="notice-header">游客预约须知</view>
				<view class="notice-list">
					<text>一、为提升游客参观体验，严格落实“限量、预约错峰”措施。</text>
					<text>二、采取全员实名免费预约参观。未满14周岁(含)的未成年人，须由成年人代为预约，并与预约人同步核验入馆。</text>
					<text>三、观众须使用实名注册手机号码进行预约，每个账号每个参观日可至多预约5人(其中一个订单中14周岁以下未成年人不超过三人)。每个证件号每日只能预约一次。使用虚拟手机号码完成注册的相关账号将被及时清理，同时取消相关预约。</text>
				</view>
				<view class="notice-btn" @click="showNoticeFun">我已阅读并同意</view>
			</view>
		</view>
	</view> <!-- 新增：闭合最外层view标签 -->
</template>

<script setup>
	import {
		ref,
		computed,
		onMounted,
		watch
	} from 'vue';
	import {
		onLoad,
		onShow
	} from '@dcloudio/uni-app';
	import {
		ordersApi
	} from '@/package/api/reservationOrders.js';
	// import CryptoJS from 'crypto-js'; // 加密库引入

	// 配置加密密钥（实际需替换为安全密钥）
	const ENCRYPTION_KEY = 'your-32-byte-secure-key-1234567890abcdef'; // AES-256要求32字节

	// 不可预约日期相关响应式数据
	const unbookableDatesList = ref([]);
	const unbookableDateStrings = ref([]);

	// 日期选择响应式数据
	const selectedDate = ref('');
	const currentTime = ref(new Date());
	const visibleDates = ref([]);
	const allDates = ref([]);
	const currentIndex = ref(0);
	const moreDays = ref(0);
	const nameErrorMessage = ref(''); // 在script中添加

	// 时间选择响应式数据
	const timeRangeList = ref([]); // 可预约时间段集合
	const selectedTime = ref(''); // 选中的时间段

	// 游客信息
	const visitorName = ref('');
	const selectedCertificateIndex = ref(0);
	const certificateTypes = ref(['身份证']);
	const visitorCertificateNumber = ref('');
	const visitorPhoneNumber = ref(''); // 原始手机号（用于加密）
	const phone = ref(''); // 显示用手机号（掩码）

	// 验证状态
	const isNameValid = ref(true);
	const isCertificateNumberValid = ref(true);
	const isPhoneNumberValid = computed(() => {
		const reg = /^1[3-9]\d{9}$/;
		return reg.test(visitorPhoneNumber.value);
	});
	const certificateErrorMessage = ref('');

	// 其他响应式数据
	const showNotice = ref(false);
	const safeAreaBottom = ref('0px');

	// 新增授权相关状态
	const isAuthAgreed = ref(false);
	const showAuthError = ref(true);
	const showProtocolModal = ref(false);
	const currentProtocolTitle = ref('');
	const currentProtocolContent = ref('');

	// 协议内容（可替换为实际内容，此处为示例）
	const serviceProtocol = `
  <h3>用户服务协议</h3>
  <p>本平台仅收集预约必要的姓名、证件号、手机号，承诺不用于其他用途。</p>
  <h4>信息使用规则</h4>
  <ul>
    <li>用于参观预约身份核验</li>
    <li>发送预约确认及参观提醒</li>
    <li>仅在预约有效期内存储</li>
  </ul>
`;

	const privacyPolicy = `
  <h3>隐私政策</h3>
  <p>我们严格保护用户信息安全，采取以下措施：</p>
  <h4>数据安全</h4>
  <ul>
    <li>传输加密：采用HTTPS协议</li>
    <li>存储脱敏：证件号、手机号部分隐藏</li>
    <li>访问控制：仅限授权人员查阅</li>
  </ul>
`;

	// 今日日期
	const todayDate = computed(() =>
		currentTime.value.toISOString().substring(0, 10).replace(/-/g, '')
	);

	// 生成日期列表
	const generateDates = () => {
		const today = new Date();
		const dates = [];
		const weekDays = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'];
		for (let i = 0; i < 30; i++) {
			const date = new Date(today);
			date.setDate(date.getDate() + i);
			const month = (date.getMonth() + 1).toString().padStart(2, '0');
			const day = date.getDate().toString().padStart(2, '0');
			const weekDay = weekDays[date.getDay()];
			dates.push({
				text: i === 0 ? '今天' : i === 1 ? '明天' : weekDay,
				number: `${month}/${day}`,
				value: `${date.getFullYear()}${month}${day}`
			});
		}
		allDates.value = dates;
		selectedDate.value = dates[0].value;
	};

	// 更新可见日期
	const updateVisibleDates = () => {
		visibleDates.value = allDates.value.slice(currentIndex.value, currentIndex.value + moreDays.value);
	};

	// 页面加载
	onShow(async () => {
		try {
			const response = await ordersApi.getTime();
			const {
				availableDays,
				timeRangeList: list,
				list: unbookableList
			} = response.data;

			moreDays.value = availableDays;

			// 使用改进的排序函数
			timeRangeList.value = sortTimeRanges(list || []);

			unbookableDatesList.value = unbookableList;
			phone.value = uni.getStorageSync("userPhone") || '';
			visitorPhoneNumber.value = phone.value;

			generateDates();
			updateVisibleDates();
			setInterval(() => currentTime.value = new Date(), 1000);
		} catch (error) {
			console.error('获取时间数据失败:', error);
			// 确保默认时间段也按正确顺序排列
			timeRangeList.value = sortTimeRanges(['9:00-12:00', '14:00-18:00']);
		}
	});

	// 改进的时间范围排序函数
	const sortTimeRanges = (timeRanges) => {
		return [...timeRanges].sort((a, b) => {
			const minutesA = parseStartTimeToMinutes(a);
			const minutesB = parseStartTimeToMinutes(b);
			return minutesA - minutesB;
		});
	};

	// 解析时间范围中的开始时间为分钟数
	const parseStartTimeToMinutes = (timeRangeStr) => {
		try {
			// 提取开始时间部分（例如从"9:00-12:00"中提取"9:00"）
			const startTimePart = timeRangeStr.split('-')[0].trim();

			// 分割小时和分钟
			const [hoursStr, minutesStr] = startTimePart.split(':');

			// 转换为数字并计算总分钟数
			const hours = parseInt(hoursStr, 10);
			const minutes = minutesStr ? parseInt(minutesStr, 10) : 0;

			// 验证解析结果
			if (isNaN(hours) || isNaN(minutes)) {
				console.warn('无效的时间格式:', timeRangeStr);
				return Infinity; // 将无效时间放在最后
			}

			return hours * 60 + minutes;
		} catch (error) {
			console.error('解析时间范围失败:', timeRangeStr, error);
			return Infinity; // 将解析失败的时间放在最后
		}
	};

	// 日期选择
	const selectDate = (date) => {
		const selectedFormatDate = `${date.slice(0, 4)}-${date.slice(4, 6)}-${date.slice(6, 8)}`;
		if (unbookableDateStrings.value.includes(selectedFormatDate)) {
			uni.showToast({
				title: '该日期不可预约',
				icon: 'none'
			});
			return;
		}
		selectedDate.value = date;
		selectedTime.value = '';
		const filtered = filteredTimeRangeList.value;
		if (filtered.length > 0) selectedTime.value = filtered[0];
	};

	// 时间选择
	const selectTime = (time) => {
		selectedTime.value = time;
	};

	// 姓名输入处理（优化版）
	const handleNameInput = (eOrValue) => {
		let value;
		if (typeof eOrValue === 'string') {
			value = eOrValue;
		} else if (eOrValue && eOrValue.target) {
			value = eOrValue.target.value;
		} else {
			return;
		}

		// 过滤规则：只保留中文和空格
		const filteredValue = value.replace(/[^\u4e00-\u9fa5\s]/g, '');

		// 更新值
		visitorName.value = filteredValue;

		// 校验逻辑（按优先级排序）
		if (value.length === 0) {
			// 1. 原始输入为空
			isNameValid.value = false;
			nameErrorMessage.value = "姓名不能为空";
		} else if (filteredValue.length === 0) {
			// 2. 过滤后的值为空（说明全是非法字符）
			isNameValid.value = false;
			nameErrorMessage.value = "姓名不符合规范";
		} else if (value !== filteredValue) {
			// 3. 存在非法字符（非中文、非空格）
			isNameValid.value = false;
			nameErrorMessage.value = "姓名不符合规范";
		} else if (/^\s+$/.test(filteredValue)) {
			// 4. 全是空格
			isNameValid.value = false;
			nameErrorMessage.value = "姓名不符合规范";
		} else {
			// 5. 校验通过
			isNameValid.value = true;
			nameErrorMessage.value = "";
		}
	};

	// 证件类型选择
	const handleCertificateChange = (e) => {
		selectedCertificateIndex.value = e.target.value;
	};

	// 证件号输入处理（增强版）
	const handleCertificateNumberInput = (eOrValue) => {
		let value;
		if (typeof eOrValue === 'string') {
			value = eOrValue;
		} else if (eOrValue && eOrValue.target) {
			value = eOrValue.target.value;
		} else {
			return;
		}

		const inputValue = value.trim().toUpperCase(); // 去除空格并转为大写
		visitorCertificateNumber.value = inputValue;

		// 空值校验
		if (inputValue === '') {
			isCertificateNumberValid.value = false;
			certificateErrorMessage.value = '请输入身份证号码';
			return;
		}

		// 长度校验
		if (inputValue.length !== 18) {
			isCertificateNumberValid.value = false;
			certificateErrorMessage.value = '身份证号码有误';
			return;
		}

		// 格式校验（正则表达式）
		const reg = /^[1-9]\d{5}(18|19|20|3\d)\d{2}(0[1-9]|1[0-2])(0[1-9]|[12]\d|3[01])\d{3}[0-9X]$/;
		if (!reg.test(inputValue)) {
			isCertificateNumberValid.value = false;
			certificateErrorMessage.value = '身份证号码有误';
			return;
		}

		// 出生日期校验
		const year = parseInt(inputValue.substring(6, 10));
		const month = parseInt(inputValue.substring(10, 12));
		const day = parseInt(inputValue.substring(12, 14));
		const date = new Date(year, month - 1, day);

		if (
			date.getFullYear() !== year ||
			date.getMonth() !== month - 1 ||
			date.getDate() !== day
		) {
			isCertificateNumberValid.value = false;
			certificateErrorMessage.value = '身份证号码有误';
			return;
		}

		// 校验位验证
		const factors = [7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2];
		const checkCodes = ['1', '0', 'X', '9', '8', '7', '6', '5', '4', '3', '2'];
		let sum = 0;

		for (let i = 0; i < 17; i++) {
			sum += parseInt(inputValue[i]) * factors[i];
		}

		const mod = sum % 11;
		const expectedCheckCode = checkCodes[mod];

		if (inputValue[17] !== expectedCheckCode) {
			isCertificateNumberValid.value = false;
			certificateErrorMessage.value = '身份证号码有误';
			return;
		}

		// 全部校验通过
		isCertificateNumberValid.value = true;
		certificateErrorMessage.value = '';
	};

	// 手机号输入处理（带加密）
	const handlePhoneNumberInput = (eOrValue) => {
		let value;
		if (typeof eOrValue === 'string') {
			value = eOrValue;
		} else if (eOrValue && eOrValue.target) {
			value = eOrValue.target.value;
		} else {
			return;
		}

		let inputValue = value;
		if (inputValue.length === 10 && inputValue.includes("*")) {
			inputValue = visitorPhoneNumber.value.substring(0, 10);
		} else {
			inputValue = inputValue.replace(/\D/g, ''); // 只保留数字
		}

		visitorPhoneNumber.value = inputValue;
		phone.value = inputValue; // 更新显示用手机号
	};

	// 加密手机号函数
	const encryptPhoneNumber = (phoneNumber) => {
		try {
			return encrypted.toString();
		} catch (error) {
			console.error('手机号加密失败:', error);
			return '';
		}
	};

	// 授权处理逻辑
	const handleAuthChange = () => {
		isAuthAgreed.value = !isAuthAgreed.value;
		showAuthError.value = !isAuthAgreed.value; // 未勾选时显示错误提示，勾选时隐藏
	};

	// 协议弹窗逻辑
	const showProtocol = (type) => {
		showProtocolModal.value = true;
		currentProtocolTitle.value = type === 'service' ? '用户服务协议' : '隐私政策';
		currentProtocolContent.value = type === 'service' ? serviceProtocol : privacyPolicy;
	};

	const closeProtocolModal = () => {
		showProtocolModal.value = false;
	};

	// 立即预约
	const handleBookNow = () => {
		// **优先校验授权协议是否勾选**
		if (!isAuthAgreed.value) {
			showAuthError.value = true; // 显示错误提示
			uni.showToast({
				title: '请勾选授权协议',
				icon: 'none',
				duration: 1500
			});
			return; // 阻止后续所有操作
		}

		// 执行表单验证
		validateForm();

		// 检查验证结果
		if (!isNameValid.value || !isCertificateNumberValid.value || !isPhoneNumberValid.value) {
			uni.showToast({
				title: '请完善有效游客信息',
				icon: 'none'
			});
			return;
		}

		if (!selectedTime.value) {
			uni.showToast({
				title: '请选择参观时间',
				icon: 'none'
			});
			return;
		}

		// 发送请求查看是否存在订单
		checkExistingOrder();
	};

	// 封装表单验证逻辑
	const validateForm = () => {
		handleNameInput(visitorName.value);
		handleCertificateNumberInput(visitorCertificateNumber.value);
		// 手机号验证由计算属性自动处理
	};

	// 检查是否存在已有订单
	const checkExistingOrder = async () => {
		try {
			const res = await ordersApi.getOrderCountByPhoneAndIdCardAndOrderStatus(
				visitorCertificateNumber.value,
				visitorPhoneNumber.value
			);

			if (res.data > 0) {
				uni.showToast({
					title: '身份证或者手机号已存在订单未核销不可再进行预约',
					icon: 'none'
				});
			} else {
				// 可预约，显示游客须知
				showNotice.value = true;
			}
		} catch (error) {
			console.error('检查订单失败:', error);
			uni.showToast({
				title: '网络错误，请稍后重试',
				icon: 'none'
			});
		}
	};

	// 提交预约
	const showNoticeFun = async () => {
		const certificateNumber = visitorCertificateNumber.value;
		const lastFourDigits = certificateNumber.substring(Math.max(0, certificateNumber.length - 4));
		const zjPrefix = "ZJ" + lastFourDigits;
		const timestamp = new Date().getTime().toString(36);
		const finalResult = zjPrefix + timestamp.slice(-3);

		const encryptedPhone = encryptPhoneNumber(visitorPhoneNumber.value); // 加密手机号
		const userName = uni.getStorageSync('login_data')?.nikeName || '';

		const bookingData = {
			userName,
			visitDate: formattedVisitDate.value,
			visitTime: selectedTime.value,
			reservationName: visitorName.value.trim(),
			certificateType: certificateTypes.value[selectedCertificateIndex.value],
			certificateNumber: visitorCertificateNumber.value.trim(),
			reservationPhone: visitorPhoneNumber.value, // 提交加密后数据
			remark: finalResult
		};

		try {
			const response = await ordersApi.add(JSON.stringify(bookingData));
			if (response.code === 200) {
				uni.showToast({
					title: '预约成功',
					icon: 'success'
				});
				// 清空表单
				visitorName.value = '';
				visitorCertificateNumber.value = '';
				visitorPhoneNumber.value = '';
				phone.value = '';
				selectedDate.value = allDates.value[0].value;
				selectedTime.value = '';
				uni.setStorageSync('typeId', 0);
				uni.setStorageSync('orderDetailId', response.data);
				uni.navigateTo({
					url: '/package/pages/Success/Success'
				});
			} else {
				uni.showToast({
					title: '预约失败',
					icon: 'none'
				});
			}
		} catch (error) {
			console.error('预约请求出错:', error);
			uni.showToast({
				title: '网络错误，请稍后重试',
				icon: 'none'
			});
		}
	};

	// 日期格式化
	const formattedVisitDate = computed(() => {
		if (!selectedDate.value) return '';
		const year = selectedDate.value.slice(0, 4);
		const month = selectedDate.value.slice(4, 6);
		const day = selectedDate.value.slice(6, 8);
		return `${year}-${month}-${day}`;
	});

	// 底部按钮样式
	const bookStyle = computed(() => ({
		position: 'fixed',
		left: 0,
		right: 0,
		bottom: `calc(${safeAreaBottom.value} + 5px)`,
		margin: '0 15px',
		backgroundColor: '#fff',
		boxShadow: '0 -2px 4px rgba(0, 0, 0, 0.1)',
		zIndex: 1000
	}));

	// 过滤可用时间段（当天限制）
	const filteredTimeRangeList = computed(() => {
		if (selectedDate.value === todayDate.value) {
			const currentTimeInMinutes = currentTime.value.getHours() * 60 + currentTime.value.getMinutes();
			return timeRangeList.value.filter(time => {
				const [startTime, endTime] = time.split('-');
				const start = parseStartTimeToMinutes(startTime);
				const end = parseStartTimeToMinutes(endTime);
				return currentTimeInMinutes <= end;
			});
		}
		return timeRangeList.value;
	});

	// 监听日期变化，重置时间选择
	watch(selectedDate, () => {
		selectedTime.value = '';
		const filtered = filteredTimeRangeList.value;
		if (filtered.length > 0) selectedTime.value = filtered[0];
	}, {
		immediate: true
	});

	const maskedPhone = computed(() => {
		const val = phone.value.trim();
		if (val.length < 11) {
			return val; // 不足11位时直接显示输入内容
		}
		// 满11位时应用掩码（前3位+****+后4位）
		return val.replace(/^(\d{3})(\d{4})(\d{4})$/, '$1****$3');
	});
</script>

<style scoped>
	/* 添加隐藏输入框样式 */
	.info-value-hidden {
		position: absolute;
		width: 1px;
		height: 1px;
		padding: 0;
		margin: -1px;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
		white-space: nowrap;
		border: 0;
	}

	/* 优化容器布局 */
	#asdfc {
		border-radius: 15px;
		background-color: #fff;
	}

	.container {
		min-height: 85vh;
		padding: 38rpx;
		box-sizing: border-box;
		padding-bottom: 30px;
		background-color: #f0f6ff;
	}

	.museum-header {
		display: flex;
		align-items: center;
		margin-bottom: 15px;
	}

	.museum-logo {
		width: 45px;
		height: 45px;
		margin-right: 8px;
	}

	.museum-name {
		font-size: 20px;
		font-weight: bold;
		color: #000;
	}

	.section-title {
		font-size: 16px;
		font-weight: bold;
		margin-top: 12px;
		margin-bottom: 8px;
		color: #666;
	}

	.date-options {
		display: flex;
		flex-wrap: nowrap;
		gap: 4px;
		overflow-x: auto;
		padding-bottom: 2px;
	}

	.date-option {
		padding: 6px 8px;
		border: 2rpx solid #8fa6ff;
		border-radius: 6px;
		text-align: center;
		font-size: 12px;
		color: #666;
		transition: all 0.2s ease-in-out;
		min-width: 65px;
		flex-shrink: 0;
		display: flex;
		flex-direction: column;
	}

	.date-option-active {
		background-color: #007AFF;
		color: white;
		border-color: #007AFF;
	}

	.date-options {
		-webkit-user-select: none;
		/* 禁止文本选择 */
		-moz-user-select: none;
		-ms-user-select: none;
		user-select: none;
		-webkit-overflow-scrolling: touch;
		/* 优化iOS滚动体验 */
		scrollbar-width: none;
		/* 隐藏Firefox滚动条 */
	}

	.date-options::-webkit-scrollbar {
		display: none;
		/* 隐藏Chrome/Safari滚动条 */
	}

	/* 新增时间选择区域样式 */
	.time-section {
		margin-bottom: 15px;
	}

	.time-options {
		display: flex;
		flex-wrap: nowrap;
		gap: 4px;
		overflow-x: auto;
		padding: 8px 12px;
		background-color: #f9fbff;
		border-radius: 12px;
		margin-top: 8px;
	}

	.time-option {
		padding: 6px 12px;
		border: 2rpx solid #8fa6ff;
		border-radius: 6px;
		font-size: 14px;
		color: #666;
		transition: all 0.2s ease-in-out;
	}

	.time-option-active {
		background-color: #007AFF;
		color: white;
		border-color: #007AFF;
	}

	.time-display {
		display: none;
		/* 隐藏原有的单个时间显示 */
	}

	.visitor-info-section {
		margin-top: 30px;
	}

	.visitor-info-header {
		margin-bottom: 10px;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.visitor-info-title {
		display: flex;
		align-items: center;
	}

	.visitor-icon {
		width: 25px;
		height: 25px;
		margin-right: 3px;
	}

	.visitor-info-text {
		font-size: 16px;
		font-weight: bold;
	}

	.visitor-details {
		border-radius: 16rpx;
		padding: 20rpx;
		background-color: #f9fbff;
	}

	.visitor-contact {
		margin-bottom: 20px;
		padding: 15px;
		background-color: #fff;
		border-radius: 12px;
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
	}

	.visitor-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 10px 0;
		border-bottom: 1px solid #f0f0f0;
		position: relative;
	}

	.visitor-item:last-child {
		border-bottom: none;
	}

	.info-label {
		font-size: 14px;
		color: #666;
	}

	.info-value {
		font-size: 14px;
		color: #333;
		flex: 1;
		text-align: right;
		padding-right: 8px;
	}

	.add-contact {
		display: flex;
		align-items: center;
		gap: 4px;
	}

	.add-contact-text {
		font-size: 12px;
		color: #007AFF;
	}

	/* 立即预约区域样式 */
	.book-section {
		padding: 10px;
		border-radius: 8px;
		box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.1);
		background-color: #fff;
	}

	.total-and-book {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.total text {
		font-size: 14px;
	}

	.total-number {
		font-weight: bold;
		margin: 0 3px;
	}

	.book-button {
		background-color: #007AFF;
		color: white;
		padding: 10px 20px;
		border-radius: 5px;
	}

	.book-button text {
		font-size: 16px;
	}

	.more-dates {
		min-width: 45px;
		padding: 6px;
	}

	/* 新增弹窗样式 */
	.notice-modal {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba(0, 0, 0, 0.5);
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: 1000;
	}

	.notice-content {
		background: linear-gradient(0deg, #FFFFFF 0%, #E6F2FF 100%);
		border-radius: 15px;
		padding: 25rpx;
		max-height: 80%;
		max-width: 80%;
	}

	.notice-header {
		text-align: center;
		font-size: 18px;
		font-weight: bold;
		margin-bottom: 15rpx;
	}

	.notice-list text {
		display: block;
		margin: 10rpx 0;
		line-height: 1.8;
		text-align: left;
		font-size: 14px;
		letter-spacing: 2rpx;
	}

	.notice-btn {
		text-align: center;
		margin-top: 20rpx;
		padding: 20rpx 60rpx;
		background: linear-gradient(180deg, #007AFF 0%, #005CE6 100%);
		color: #FFFFFF;
		border: none;
		border-radius: 50rpx;
		cursor: pointer;
		font-size: 16px;
		box-shadow: 0 4px 12px rgba(0, 122, 255, 0.2);
		font-weight: 500;
	}

	.book-section {
		padding: 10px;
		border-radius: 8px;
		box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.1);
		background-color: #fff;
		position: fixed;
		/* 明确固定定位 */
		left: 0;
		right: 0;
		bottom: calc(var(--safe-area-inset-bottom, 0px) + 5px);
		/* 适配安全区域 */
		margin: 0 15px;
		z-index: 1000;
		/* 提升层级到最高 */
	}

	.time-section {
		margin-bottom: 25px;
	}

	.time-options {
		display: flex;
		flex-wrap: nowrap;
		gap: 8px;
		overflow-x: auto;
		padding: 8px 12px;
		background-color: #ffffff;
		border-radius: 12px;
	}

	.time-option {
		padding: 8px 16px;
		/* 调整内边距以实现长方形样式 */
		border: 2rpx solid #8fa6ff;
		border-radius: 6px;
		font-size: 14px;
		color: #333;
		transition: all 0.2s ease-in-out;
		white-space: nowrap;
		/* 防止文本换行 */
	}

	.time-option-active {
		background-color: #007AFF;
		color: white;
		border-color: #007AFF;
	}

	.error-message {
		color: red;
		font-size: 12px;
		position: absolute;
		bottom: -15px;
		right: 0;
	}




	/* 新增授权模块样式 */
	.user-auth-container {
		position: fixed;
		left: 0;
		right: 0;
		bottom: calc(var(--safe-area-inset-bottom, 0px) + 120px);
		/* 预留预约按钮和安全区域空间 */
		padding: 50rpx;
		/* background-color: #fff; */
		z-index: 999;
	}

	.auth-checkbox-group {
		display: flex;
		align-items: baseline;
		gap: 8px;
		font-size: 14px;
		color: #333;
		padding: 0 10px;
	}

	.auth-checkbox {

		accent-color: #007AFF;
		transform: scale(1.2);
	}

	.protocol-link {
		color: #005CE6;
		text-decoration: underline;
		cursor: pointer;
	}

	.auth-note {
		font-size: 12px;
		color: #666;
		margin-left: 4px;
		line-height: 1.5;
	}

	.auth-error {
		color: #FF4D4F;
		font-size: 12px;
		text-align: right;
		margin-top: 8rpx;
	}

	/* 协议弹窗样式 */
	.protocol-modal {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba(0, 0, 0, 0.7);
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: 999;
	}

	.protocol-content {
		width: 90%;
		max-width: 720rpx;
		background: #fff;
		border-radius: 30rpx;
		padding: 40rpx;
	}

	.protocol-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding-bottom: 20rpx;
		border-bottom: 1rpx solid #F0F0F0;
	}

	.protocol-header text:first-child {
		font-size: 32rpx;
		font-weight: 600;
		color: #1A1A1A;
	}

	.protocol-body {
		margin-top: 30rpx;
		font-size: 28rpx;
		line-height: 1.8;
		color: #666;
		overflow-y: auto;
		max-height: 80vh;
	}

	.close-btn {
		font-size: 40rpx;
		color: #666;
		cursor: pointer;
	}

	.auth-label {
		font-size: 12px;
	}
</style>